<template>
  <div class="bar">
    <div class="title box">
      <div>
        <span>返修件详细信息</span>
      </div>
      <div>
        <a-button type="primary" @click="addNewRepair">新增返修件</a-button>
      </div>
    </div>
    <a-row :gutter="[8, 8]">
      <a-col :span="6" v-for="(item, index) in repairLists" :key="index">
        <div class="cardBox">
          <div class="boxHead">
            <div class="text">
              <span>返修件{{ index + 1 }}</span>
            </div>
            <div class="handle">
              <a-icon type="delete" @click="deleteRepair($event, index)" />
            </div>
          </div>
          <div class="boxBody">
            <div class="itemWrap">
              <div class="label">
                <span>客户名称</span>
              </div>
              <div class="separator"><span>:</span></div>
              <div class="content">
                <a-input v-model="item.customerName" allow-clear />
              </div>
            </div>

            <div class="itemWrap">
              <div class="label">
                <span>厂家名称</span>
              </div>
              <div class="separator"><span>:</span></div>
              <div class="content">
                <a-input v-model="item.companyName" allow-clear />
                <!-- <a-select
                  v-model="item.companyName"
                  style="width: 100%;"
                  show-search
                  placeholder="请输入人名"
                  :options="companyNameLists"
                  :filter-option="filterCompanyName"
                ></a-select> -->
              </div>
            </div>

            <div class="itemWrap">
              <div class="label">
                <span>返修件类型</span>
              </div>

              <div class="separator"><span>:</span></div>
              <div class="content">
                <a-select
                  v-model="item.productType"
                  style="width: 100%;"
                  :options="item.productTypeLists"
                  @change="productTypeHandle($event, index)"
                >
                </a-select>
              </div>
            </div>

            <div class="itemWrap">
              <div class="label">
                <span>返修件型号</span>
              </div>
              <div class="separator"><span>:</span></div>
              <div class="content">
                <a-input
                  v-if="item.hasProductModelLists"
                  v-model="item.productModel"
                  allow-clear
                />
                <a-select
                  v-else
                  v-model="item.productModel"
                  style="width: 100%;"
                  :options="item.productModelLists"
                >
                </a-select>
              </div>
            </div>

            <div class="itemWrap">
              <div class="label">
                <span>返修件编号</span>
              </div>
              <div class="separator"><span>:</span></div>
              <div class="content">
                <a-input v-model="item.productNumber" allow-clear />
              </div>
            </div>

            <div class="itemWrap">
              <div class="label">
                <span>保修状态</span>
              </div>
              <div class="separator"><span>:</span></div>
              <div class="content">
                <a-select
                  v-model="item.warrantyStatus"
                  style="width: 100%;"
                  :options="warrantyStatusLists"
                >
                </a-select>
              </div>
            </div>

            <div class="itemWrap" style="align-items: flex-start;">
              <div class="label">
                <span>故障信息</span>
              </div>
              <div class="separator"><span>:</span></div>
              <div class="content">
                <a-textarea
                  v-model="item.faultInformation"
                  :autoSize="{ minRows: 2, maxRows: 4 }"
                  allow-clear
                />
              </div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import api from "@/server/userConfig";
import { WarrantyType } from "@/unit/constantValue";

export default {
  name: "cardList",
  components: {},
  props: {},
  data() {
    return {
      userName: "",
      role: "",
      compId: "",
      repairLists: [
        {
          customerName: "",
          companyName: "",
          productType: "",
          productTypeLists: [],
          productModel: "",
          productModelLists: [],
          hasProductModelLists: false,
          productNumber: "",
          warrantyStatus: "",
          faultInformation: ""
        }
      ],
      productTypeLists: [],
      productModelLists: [],
      productModeObj: {},
      warrantyStatusLists: [],
      defaultSearchData: [],
      defaultRepairListsItem: {}
    };
  },
  methods: {
    async getProductModel(parames) {
      const res = await api.getProductModel({ username: this.userName });

      if (res.msgCode !== 0) {
        return;
      }

      this.productTypeLists = buildSelectOption(res.data);
      this.productModeObj = buildSecondSelectOption(res.data);

      let productModelKey = this.productTypeLists[0].value;

      this.repairLists[0].productTypeLists = this.productTypeLists;
      this.repairLists[0].productType = this.productTypeLists[0].value;

      this.repairLists[0].productModelLists = this.productModeObj[
        productModelKey
      ];
      this.repairLists[0].productModel = this.productModeObj[
        productModelKey
      ][0].value;

      return new Promise((resolve, reject) => {
        resolve();
      });

      function buildSelectOption(lists) {
        let _lists = [];

        _lists = lists.map((item, index) => {
          return {
            label: item.productType,
            value: item.productType
          };
        });

        return _lists;
      }

      function buildSecondSelectOption(lists) {
        let listsObj = {};

        lists.forEach((item, index) => {
          listsObj[item.productType] = item.productModel.map((item, index) => {
            return {
              label: item,
              value: item
            };
          });
        });

        return listsObj;
      }
    },

    buildTypeLists() {
      this.warrantyStatusLists = WarrantyType;
      this.repairLists[0].warrantyStatus = WarrantyType[0].value;
      // this.impedimentTypeLists = ImpedimentType;
      // this.search.impedimentType = ImpedimentType[0].value;
      // this.repairLists.productType[0] = this.productTypeLists[0].value;
    },

    buildDefaultData() {
      this.defaultSearchData = Object.assign({}, this.repairLists);
      let str = JSON.stringify(this.defaultSearchData[0]);
      let obj = JSON.parse(str);
      this.defaultRepairListsItem = Object.assign({}, obj);
    },

    productTypeHandle(e, index) {
      this.repairLists[index].productModelLists = this.productModeObj[e];
      if (this.repairLists[index].productModelLists.length > 0) {
        this.repairLists[index].hasProductModelLists = false;
        this.repairLists[index].productModel = this.productModeObj[e][0].value;
      } else {
        this.repairLists[index].hasProductModelLists = true;
        this.repairLists[index].productModel = "";
      }

      // let change = this.repairLists[index];
      // change.hasProductModelLists = !change.hasProductModelLists;
      // this.$set(this.repairLists, index, change);
    },

    addNewRepair() {
      let newItem = Object.assign({}, this.defaultRepairListsItem);
      this.repairLists.push(newItem);
    },

    deleteRepair(e, index) {
      let _this = this;
      if (_this.repairLists.length > 1) {
        this.$Modal.confirm({
          title: "是否删除?",
          onOk() {
            _this.repairLists.splice(index, 1);
          },
          onCancel() {}
        });
      } else {
        this.$message.warning("必须保留一条返修件信息");
      }
    },
    getFormData() {
      let _this = this;
      let valid = true;
      let lists = [];

      _this.repairLists.forEach((item, index) => {
        let {
          hasProductModelLists,
          productModelLists,
          productTypeLists,
          ...rest
        } = item;
        lists.push({ ...rest });
      });

      lists.forEach((item, index) => {
        for (const key in item) {
          if (Object.hasOwnProperty.call(item, key)) {
            if (item[key] === "" || item[key] === undefined) {
              valid = false;
              _this.$message.error(`返修件${index + 1} 信息不完整`);
              return;
            }
          }
        }
      });

      return new Promise((resolve, reject) => {
        let validData = {
          isValid: valid,
          data: lists
        };
        resolve(validData);
      });
    },
    // searchData() {
    //   this.$emit("emitSearchData", {
    //     ...this.search
    //   });
    // }
    // restSearchData() {
    //   this.search = this.defaultSearchData;
    // }
    getLocalStorageData() {
      const phone = localStorage.getItem("phone");
      this.userName = phone;
      const userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.role = userInfo.ID;
      this.compId = userInfo.compid;
    }
  },
  created() {
    this.getLocalStorageData();
  },
  async mounted() {
    await this.getProductModel();
    this.buildTypeLists();
    this.buildDefaultData();
  },
  computed: {}
};
</script>

<style scoped="scoped">
.bar {
  width: 100%;
  background-color: #ffffff;
  padding: 16px;
}

.bar > .title {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1890ff;
  padding: 0px 0px 16px 0px;
}

.bar .cardBox {
  border: 1px solid #e8e8e8;
  padding: 8px 8px;
  border-radius: 4px;
  min-height: 380px;
}

.bar .boxHead {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.bar .boxBody {
}

.bar .boxHead > .text {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1890ff;
}

.bar .boxHead > .handle {
  font-size: 16px;
  font-family: Microsoft YaHei;
  color: #1890ff;
}

.itemWrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  padding: 4px 0;
  margin: 4px 0;
}

.itemWrap > .label {
  min-width: 84px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #373737;
  text-align: right;
}

.itemWrap > .separator {
  padding: 0px 4px;
}

.itemWrap > .content {
  width: 100%;
  padding: 0px 1px;
}

.bar .cardBox.icon {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  padding: 4px 0;
}

.iconBox {
  text-align: center;
  font-size: 64px;
  color: #373737;
}

.bar > .title.box {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
</style>
